<template>
	<view class="content">
		<view class="cu-form-group margin-top">
			<view class="title">
				<text class="title_tip">*</text>
				投诉人姓名</view>
			<input placeholder="请输入" name="input" @input="getuserName"></input>
		</view>
		<view class="cu-form-group">
			<view class="title"><text class="title_tip">*</text>投诉人手机</view>
			<input placeholder="请输入" name="input" @input="getuserPhone" maxlength="11"></input>
		</view>
		<view class="cu-form-group">
			<view class="title"><text class="title_tip">*</text>所在区域</view>
			<input name="input" placeholder="请选择" disabled="disabled" :value="region" @click="showMulLinkageThreePicker"/>
		</view>
		<view class="complain_content">
			<view class="title"><text class="title_tip">*</text>投诉内容</view>
			<textarea class="complain_textarea" maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="请输入内容"></textarea>
		</view>
		
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="title_tip">*</text>图片上传
			</view>
			<view class="action">
				{{imgList.length}}/6
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<6">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		
		<view class="navigator_btn" @click="commitComplain">我要反映</view>
		<navigator :url="'complainRecordList?userId='+userId" class="navigatior">
			<view class="navigator_bottom">投诉记录</view>
		</navigator>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		 
	</view>
	
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../common/city.data.js';
	
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				imgList: [],
				modalName: null,
				region : '',
				provice:'',
				city:'',
				area:'',
				userName:'',
				userPhone:'',
				complainContent:'',
				cityPickerValueDefault: [0, 0, 1],
				imgListPath:[],
				userId:''
			}
		},
		onLoad(option) {
			this.userId = option.userId;
			console.log('==='+this.userId);
		},
		methods:{
			getuserName(e) {
				this.userName = e.detail.value
			},
			getuserPhone(e) {
				this.userPhone = e.detail.value;
			},
			textareaAInput(e) {
				this.complainContent = e.detail.value
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				uni.hideKeyboard();
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.cityPickerValueDefault = e.value;
				this.region = e.label.replace(/[-]/g,'');
				var arr = e.label.split("-");
				this.provice = arr[0];
				this.area = arr[1];
				this.city = arr[2];
			},
			
			ChooseImage() {
				var count = 6 - this.imgList.length;
				uni.chooseImage({
					count: count, //默认6
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						if (this.imgList.length > 6) {
							this.imgList = this.imgList.slice(0, 6);
						}
						console.log(this.imgList)
						uni.showLoading({});
						for (var i = 0; i < this.imgList.length; i++) {
							var tempFilePaths = this.imgList[i];
							var imageSrc = tempFilePaths;
							uni.uploadFile({
								url: this.websiteUrl + 'appim/savePicture',
								filePath: imageSrc,
								fileType: 'image',
								name: 'file',
								success: (res) => {
									console.log('uploadImage success, res is:', res)
									if (res.statusCode == 200) {
										var img = this.websiteUrl + 'app/' + res.data;
										var imglist = [img];
										this.imgListPath = this.imgListPath.concat(imglist);
										if (this.imgListPath.length == this.imgList.length) {
											console.log("上传完成");
											uni.hideLoading();
										}
									} else {
										uni.showToast({
											title:res.errMsg,
										})
										uni.hideLoading();
									}
								},
								fail: (err) => {
									console.log('uploadImage fail', err);
									uni.showToast({
										title:err.errMsg,
									})
								},
								complete:() => {
									uni.hideLoading();
								}
							});
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor:'#19c99a',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			commitComplain() {
				if (this.showContentToast('投诉人姓名不能为空', this.userName)) return;
				if (this.showContentToast('投诉人手机号不能为空', this.userPhone)) return;
				if (this.showContentToast('所在区域不能为空', this.region)) return;
				if (this.showContentToast('投诉内容不能为空', this.complainContent)) return;
				if (this.showContentToast('图片不能为空', this.imgList)) return;

				var imgPath = '';
				if (this.imgList.length == 1) {
					imgPath = this.imgListPath[0];
				} else {
					for (var i = 0; i < this.imgListPath.length; i++) {
						var path = this.imgListPath[i];
						imgPath = imgPath + path;
						if (i != this.imgListPath.length - 1) {
							imgPath = imgPath + ',';
						}
					}
				}
				var userid = this.userId;
				var data = {
					"NAME": this.userName,
					"MOBILE": this.userPhone,
					"PROVICE":this.provice,
					"AREA":this.area,//区县
					"CITY":this.city,
					"CONTENT": this.complainContent,
					"PICS":imgPath,// ,隔开
					"USERID" : userid
				}
				console.log(data)
				uni.showLoading({
					title: '发布中',
					mask: false
				});
				uni.request({
					url: this.websiteUrl + 'appim/addComplaints',
					method: 'POST',
					data: data,
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res);
						if (res.statusCode == 200) {
							uni.showModal({
								title: "提交成功",
								content: "我们将在24小时之内对您的投诉建议进行反馈~ 届时您可通过“反馈记录”查看并评价反馈记录",
								showCancel: false,
								confirmText: "确定",
								confirmColor:"#19c99a",
								success: function (res) {
								    uni.redirectTo({
								        url: 'complainRecordList?userId='+userid
								    });
								}
							})
						} else {
							uni.showToast({
								title:res.errMsg
							});
						}
					},
					fail: () => {
						
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			showContentToast(title, name) {
				if (name.length == 0) {
					uni.showToast({
						title: title,
						position: 'center'
					});
					return true;
				}
				return false;
			}
		}
	}
	
</script>

<style>
	page {
		background-color: white;
	}
	.content {
		background-color: white;
	}
	.title_tip {
		color: #F43F3B;
	}
	.complain_content {
		background-color: white;
		padding: 1px 14px;
		border-top: 1px solid #eee;
	}
	.complain_content .title {
		font-size: 14px;
		line-height: 28px;
		padding: 10px 0px;
	}
	.complain_textarea {
		border: 1px solid #eee;
		width: 100%;
		padding: 10px;
	}
	.uni-textarea-compute, .uni-textarea-placeholder, .uni-textarea-textarea {
		padding: 10px;
	}
	
	.navigatior {
		/* line-height: 20px; */
		margin-bottom: 20px;
		margin-top: 10px;
	}
	.navigator_btn {
		background-color: #19c99a;
		color: white;
		border: 1px solid #19C99A;
		border-radius: 4px;
		font-size: 14px;
		padding:5px 10px;
		width: 30%;
		margin-left: 35%;
		text-align: center;
		margin-top: 20px;
	}
	.navigator_bottom {
		border-bottom:1px solid #19c99a;
		color: #19c99a;
		line-height: 30px;
		width: 20%;
		margin-left: 40%;
		text-align: center;
		font-size: 14px;
		bottom: 30px;
	}
	.navigator_btn:after {
		border: none;
	}
	
	
</style>
